<template>
	
	<my-nav-bar bgType="OrangeFrostedGlass"></my-nav-bar>

	<view class="avatarArea" :style="{marginTop: getNavBarHeight() + 'px'}">
		<image class="avatar" src="../../static/七彩童年_logo3.jpg" mode="aspectFit"></image>
		<text class="intro"> 全国十佳儿童摄影 </text>
		<text class="intro"> 婴幼儿高档影像馆 </text>
		<hr class="grey-line">
		<text class="location"> 江西 萍乡 </text>
	</view>
	
	<view class="introduceArea">
		<text class="left quotation">“</text>
		<text class="introText"> 
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			打造中国儿童摄影标杆企业-萍乡七彩童年专业儿童摄影至2002年诞生以来已通过镜头记录了超20万+家庭幸福的面孔，记录着孩子的成长！ 
		</text>
		<text class="right quotation">”</text>
	</view>
	
	<view class="contactAndMapBox">
		<view class="contactArea">
			<view class="buttonBox">
				<view class="buttonCircle" @click="onClickPhone()"> <uni-icons class="icon" type="phone" size="30"></uni-icons> </view>
				<text> 联系电话 </text>
			</view>
			<view class="buttonBox">
				<view class="buttonCircle"> <uni-icons class="icon" type="weixin" size="30"></uni-icons> <button open-type="contact"> kefu button</button>  </view>
				<text> 微信客服 </text>
			</view>
			<view class="buttonBox">
				<view class="buttonCircle"> <uni-icons class="icon" type="contact" size="30"></uni-icons> </view>
				<text> 公众号 </text>
			</view>
			<view class="buttonBox">
				<view class="buttonCircle" @click="onClickLocation"> <uni-icons class="icon" type="location" size="30"></uni-icons> </view>
				<text> 店面地址 </text>
			</view>
		</view>
		
		<view :class="['mapArea', ifFold ? 'fold' : '' ]" ref="mapArea">
			<!-- {{ifFold}} -->
			<view class="addressBox">
				<p class="address"> 江西省萍乡市安源区楚萍东路200-1 <button class="gotoButton" @click="onClickGoto"> 到这里去 </button> </p>
			</view>
			<hr class="grey-line">
			<view class="mapWrap">
				<map class="map" style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers" :scale="scale"> </map>
			</view>
			<view class="addressBox2">
				<p class="address2"> 金典城北门3号楼 </p>
			</view>
			<view class="GlassLayer"></view>
		</view>
		
		<view class="lunboArea">
			<pc-carousel ref="lunbo" :data="lunboList" field="imgUrl" mode="single" @selection="selection" :autoplay="true"></pc-carousel>
		</view>
		
	</view>
	
	<view class="downInfo">
		
		<hr class="grey-line">
		<text class="CompanyName"> 2002-2024 \n © 萍乡市七彩童年专业儿童摄影中心 </text>
		<p class="downIntro">  有一种品质叫做用心，<br>有一种执着叫做专业，<br>有一种伟大来自于平凡，<br>有一种前行来自于坚持。 </p>		
		<view class="downBlock"> </view>
		
	</view>
	
	<my-nav class="down-nav" :y="Number(4)" :x="XRef"></my-nav>
		
</template>

<script setup>
	import { ref, computed, watch, nextTick, onMounted } from 'vue';
	import { SYSTEM_INFO, getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIcon } from '@/utils/system.js';
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	import { BASE_URL, request } from "@/utils/request.js";
		
	const id = 0; // 使用 marker点击事件 需要填写id
	const title = 'map';
	const latitude = ref(27.641898);
	const longitude = ref(113.8535);
	const scale = ref(16);
	const covers = ref([{
		latitude: 27.641890,
		longitude: 113.8535,
		iconPath: '../../static/map_pin-removebg-preview.png',
		width: 36,
		height: 36
	}]);
	const ifFold = ref(true);

	const mapArea = ref(null);
	const onClickLocation = ()=>{
		ifFold.value = !ifFold.value;
		console.log("if fold: ", ifFold.value);
		
		animate(16,18,2000);

		if ( !ifFold.value ){
			uni.pageScrollTo({
				selector: '.mapArea',
				duration: 222, // 滚动动画时长，单位ms
			
			})
		}
	}
		
	/**
	 * 线性插值函数
	 * @param {number} a - 起始值
	 * @param {number} b - 结束值
	 * @param {number} t - 时间比例（0 到 1）
	 * @returns {number} - 插值结果
	 */
	function lerp(a, b, t) {
		return a + (b - a) * t;
	}

	/**
	 * Ease-in-out 插值函数
	 * @param {number} t - 时间比例（0 到 1）
	 * @returns {number} - 插值结果
	 */
	function ease_in_out(t) {
		return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
	}
	
	async function animate(a, b, duration){ //初始值，结束值，动画时间ms
		let ten_ms_cnt = 0;
		console.log('动画开始');
		const intervalId = setInterval(() => {
		    ten_ms_cnt++;
			if (ten_ms_cnt*10 >= duration) {
			    clearInterval(intervalId);
			    console.log('动画结束');
			}
			
			let ratio = ten_ms_cnt/(duration/10);
			scale.value = lerp(a, b, ease_in_out(ratio) );    
		}, 10);
	}
	
	const onClickPhone = ()=>{
		console.log("phone");
		uni.makePhoneCall({
			phoneNumber: '114514' //仅为示例
		});
	}
	
	const onClickGoto = ()=>{
		console.log("onClickGoto()");
		uni.openLocation({
			latitude: latitude.value,
			longitude: longitude.value,
			success: (e)=>{
				console.log('跳转微信定位界面成功, e:', e);
			},
			fail: (e)=> {
				console.log('跳转微信定位界面失败, e:', e);
			}
		});
	}
	
	const lunboList = ref([]);
	const lunbo = ref(null);
	
	const getDataList = async function(){
		try {
			const res = await request({ url: 'product/all' });
			console.log("all product data: ", res.data);
			
			lunboList.value = res.data;
			lunboList.value.forEach((obj, index) => {
				lunboList.value[index].imgUrl = BASE_URL + `product/image/${obj.id}`;
			});
			console.log("lunboList: ", lunboList.value);
			
			// 使用 nextTick 确保 DOM 更新完成
			await nextTick();
			lunbo.value.getDatalist();
		} catch (error) {
			console.error("Failed to fetch data: ", error);
		}
	}
	
	const selection = function(e){
		console.log("select lunbo: "); console.log(e);
	}
	
	onReady(()=>{ //dom体挂载完毕
		console.log("onReady函数");
		console.log(lunbo.value);
		console.log(lunbo.value.getDatalist);
		
		getDataList()
	})
	
	
	// ---------------------------------------------
	const XRef = ref( Number(4) );

	onLoad((event) => {
		XRef.value = event.LastIdx ? Number(event.LastIdx) : 4;
	});


</script>

<style lang="scss" scoped>
	
	text{
		font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	
	.avatarArea{
		padding-top: 100rpx;
		// border: 2px solid red;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; 
		
		.avatar{		
			// border: 1px solid blue;
			// box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.248); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
			border-radius: 20%;
			height: 300rpx;
			width: 400rpx;
		}
		
		.intro{
			margin-top: 20rpx;
			font-weight: lighter;
			font-size: 40rpx;
			letter-spacing: 10rpx;
		}
		
		.grey-line {
			width: 50%;
		    border: 1px solid #ccc; /* 灰色边框，可以根据需求调整粗细 */
		    margin: 10rpx 10rpx; /* 可选的上下边距 */
		}
		
		.location{
			margin-top: 10rpx;
			color: #808080;
		}

	}
	
	.introduceArea{
		// border: 2px solid red;
		// height: 500rpx;
		border-radius: 10rpx;
		box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.248); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
		margin: 80rpx;
		margin-bottom: 0;
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: #dcdcdc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; 
		overflow: hidden;
		position: relative;
		
		.left{
			text-align: left;
			left: 10rpx;
			top: 0;
		}
		.right{
			text-align: right;
			right: 10rpx;
			bottom: -100rpx;
		}
		
		.quotation{
			// border: 1px solid red;
			position: absolute;
			font-size: 200rpx;
			font-family: Arial, Helvetica, sans-serif;
			color: #808080;
		}
		
		.introText{
			// border: 1px solid blue;
			position: relative;
			width: 80%;
			margin: 100rpx;
		}
	}
	
	.contactArea{
		// border: 2px solid red;
		margin-bottom: 50rpx;
		padding: 0 100rpx 0 100rpx;
		width: 100%;
		display: flex; /* 使用 Flexbox 布局 */
		justify-content: center; /* 水平居中 */
		// display: grid; /* 使用 Grid 布局 */
		// grid-auto-flow: column; /* 让网格项按列排列 */
		
		.buttonBox{
			// border: 1px solid green;
			height: 200rpx;
			
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center; 
			
			.buttonCircle{
				position: relative;
				// border: 1px solid blue;
				height: 100rpx;
				width: 100rpx;
				border-radius: 100%;
			    box-shadow: 5rpx 10rpx 15rpx rgba(128, 128, 128, 0.5); /* RGBA颜色值，透明度为0.5 */
				overflow: hidden;
				
				button{
					height: 100%;
					width: 100%;
					opacity: 0;
				}
				
				.icon{
					position: absolute; /* 子元素绝对定位 */
					top: 50%; /* 子元素顶部距离父元素上边界的距离为父元素高度的一半 */
					left: 50%; /* 子元素左侧距离父元素左边界的距离为父元素宽度的一半 */
					transform: translate(-50%, -50%); /* 使用负的margin来将子元素的中心对准父元素的中心 */
				}
			}
			
			text{
				margin-top: 10rpx;
				white-space: nowrap; /* 文本不换行 */
				font-size: 20rpx;
			}
			
		}

	}
	
	.contactAndMapBox{
		display: flex; flex-direction: column; align-items: center;
		// border: 2px solid blue;
		padding-bottom: 200px;
		position: relative;
		.mapArea{
			position: absolute;
			top: 200rpx;
		}
	}
	
	.mapArea.fold{
		z-index: -1;
		height: 0;
		border-radius: 22rpx;
		opacity: 0;
		filter: blur(10px);
		
		transition: 0.7777777s;
	}
	
	.mapArea{
		// border: 2px solid red;
		z-index: 114514;
		
		overflow: hidden;
		box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.248); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
		border-radius: 77rpx;
		background-color: rgba(211,211,211,0.899);
		backdrop-filter: blur(10rpx);
		width: 700rpx; height: 777rpx;
		left: 0; right: 0; margin: auto;
		display: flex; flex-direction: column;  align-items: center; /* 水平居中 */
		
		transition: 1s;
		
		.addressBox{
			// border: 1px solid green;
			top: 10rpx;
			margin-top: 10rpx;

			.address{
				// border: 1px solid blue;
				display: flex; flex-direction: row; justify-content: center; align-items: center;
				line-height: 3; /* 文本行高为元素高度的两倍 */
				font-size: 30rpx; font-weight: 700; white-space: nowrap; /* 文本不换行 */
				
				.gotoButton{
					z-index: 99998109;
					// border: 1px solid blue;
					position: relative; display: flex; align-items: center; justify-content: center;
					box-sizing: border-box;
					background-color: #FFD700;
					width: 160rpx; height: 80rpx; padding: 24rpx; border-radius: 65rpx;
					overflow: hidden;
					font-size: 25rpx; font-weight: 500; text-align: center;
					&::after {
						position: absolute;
						top: 0; right: 0; bottom: 0; left: 0;
						background-image: radial-gradient(circle, #daa520 10%, transparent 10.1%);
						transform: scale(10);
						opacity: 0;
						transition: all 0.45s;
						content: '';
					}
				
					&:active::after {
						transform: scale(0);
						opacity: 0.5;
						transition: 0s;
					}
				}
				
			}
			
		}
		
		.grey-line {
			width: 98%;
		    border: 1px solid gray; /* 灰色边框，可以根据需求调整粗细 */
		    margin: 0 0 2px 0; /* 可选的上下边距 */
		}
		
		.mapWrap{
			// border: 1px solid blue;
			overflow: hidden;
			width: 98%; height: 90%;
			left: 0; right: 0; margin: auto;
		}
		
		.addressBox2{
			// border: 1px solid red;
			margin-bottom: 10rpx;
			.address2{
				line-height: 2; /* 文本行高为元素高度的两倍 */
				font-size: 30rpx;
				font-weight: 700;
				white-space: nowrap; /* 文本不换行 */
			}
		}
	
		.GlassLayer{
			position: fixed; width: 100%; height: 100%;
			background-color: rgba(255,255,255,0);
			// backdrop-filter: blur(10px);
			z-index: 9999810;
		}
	}
	
	.lunboArea{
		// border: 1px solid red;
		height: 400rpx; width: 96%;
		z-index: 10;
	}
	
	.downInfo{
		// border: 1px solid red;
		// margin-top: 400rpx;
		// padding-top: 77rpx;
		height: 463.5rpx;
		width: 100%;
		// background-color: lightslategray;
		
		position: relative;
		display: flex;
		flex-direction: column; /* 子元素从上到下排列 */
		// justify-content: center; /* 垂直居中 */
		align-items: center; /* 水平居中 */
		
		.grey-line {
			width: 90%;
		    border: 0.1px solid #ccc; /* 灰色边框，可以根据需求调整粗细 */
		    margin: 0 0 10px 0; /* 可选的上下边距 */
		}
		
		.CompanyName{
			color: #808080;
		}
		
		.downIntro{
			margin-top: 10px;
			width: 200px;
		}
		
		.downBlock{
			height: 140rpx;
			position: absolute;
			top: 323.5rpx;
			background-color: gray;
			width: 100%;
		}
	}
	
	.down-nav{
		// border: 10px solid red;
		z-index: 1919810;
		position: fixed;
		bottom: 20rpx;
	}
	
</style>
